<template>
  <div class="eagle-eye-perspective">
    <div class="eagle-video-container">
      <hkarVideo
        v-if="url"
        :id="url + '-' + nanoid()"
        ref="videoPlayerRef"
        :src="url"
      />
    </div>

    <transition
      appear
      name="custom-classes-transition"
      enter-active-class="animate__animated animate__faster  animate__fadeIn"
      leave-active-class="animate__animated animate__faster animate__fadeOut"
    >
      <div class="open" v-drag v-if="openFlag">
        <Gimbal
          :closeGimbalPanel="closeGimbalPanel"
          :scale="1"
          :bgColor="'transparent'"
          :width="220"
        />
      </div>
      <div class="collapse" v-else>
        <img
          :src="requireImgUrl('image', '云台_展开')"
          alt="云台_展开"
          title="云台_展开"
          @dblclick="changeGimbalShow"
        />
      </div>
    </transition>
  </div>
</template>
<script setup lang="ts">
import { requireImgUrl } from "@/utils/localurl/metaUrl";
import {
  getRtsp,
  executeGatewayControl,
  getEqControlItem,
} from "@/api/screen/equipment";
import emits from "@/utils/emits";
import { nanoid } from "nanoid";
import { ElMessage } from "element-plus";
import { ref, onMounted, onUnmounted, nextTick, defineProps } from "vue";
import { getEqByCode, getSubordinateEquipments } from "@/api/equipment";
import hkarVideo from "@/components/hkarVideo/video-player.vue";
// 切换控制台显隐
const openFlag = ref(false);
const changeGimbalShow = () => {
  openFlag.value = true;
};
const closeGimbalPanel = (val: boolean) => {
  openFlag.value = val;
};
// 视频dom
const videoPlayerRef = ref(null);
// 视频url
const url = ref("");
// 获取视频流地址接口
const getVideoUrl = async (videoID: any) => {
  let res = (await getRtsp(videoID)) as any;
  if (res.code == 200) {
    return res.data;
  }
};
const field = ref("");
//4728
// 控制项item
const controlItem = ref({
  controlId: "",
  equipmentId: "",
});
// 获取网关控制项
const GETCONTROLITEM = async (id) => {
  if (id) {
    console.log("切换id==============================>", id);
    let res = (await getEqControlItem(id)) as any;
    if (res.code == 200) {
      controlItem.value = {
        controlId: res.data[0].id,
        equipmentId: id,
      };
      field.value = res.data[0].execParams[0].field;
    }
  }
};
// 执行设备控制
const controlEQ = async (command) => {
  let execParams = {};
  execParams[field.value] = command;
  let queryForm = {
    controlId: controlItem.value.controlId,
    equipmentId: controlItem.value.equipmentId,
    execParams,
  };
  let res = (await executeGatewayControl(
    controlItem.value.controlId,
    queryForm
  )) as any;
  if (res.code === 200) {
  }
};
const init = async () => {
  let params = { regionCode: "ALL", type: "监控设备", model: "鹰眼" };
  let arhkList: any = await getSubordinateEquipments(params);
  let code = arhkList.data[0].equipmentLocationCode;
  let resData = (await getEqByCode(code)).data;
  let resList: [] = resData.extendProperty.baseParamsList;
  let eqID = resData.id;
  let arMap = new Map();
  resList.map((item: any) => {
    arMap.set(item.paramKey, item.defaultValue);
  });
  await GETCONTROLITEM(eqID);
  let arurl = `rtsp://${arMap.get("username")}:${arMap.get(
    "password"
  )}@${arMap.get("deviceIp")}:554/Streaming/Channels/${arMap.get(
    "detailChannel"
  )}?transportmode=unicast`;
  return arurl;
};
onMounted(() => {
  nextTick(async () => {
    url.value = await init();
    emits.on("HANDEL_GIMBAL", (str) => {
      if (
        videoPlayerRef.value &&
        url.value &&
        controlItem.value.equipmentId &&
        controlItem.value.controlId
      ) {
        switch (str) {
          case "上":
            controlEQ("UP");
            break;
          case "下":
            controlEQ("DOWN");
            break;
          case "左":
            controlEQ("LEFT");
            break;
          case "右":
            controlEQ("RIGHT");
            break;
          case "减焦距":
            controlEQ("ZOOM_OUT");
            break;
          case "加焦距":
            controlEQ("ZOOM_IN");
            break;
          default:
            break;
        }
      } else {
        ElMessage({
          message: "未勾选云台设备",
          type: "warning",
        });
      }
    });
  });
});
onUnmounted(() => {
  if (videoPlayerRef.value) {
    videoPlayerRef.value = null;
    emits.emit("CLOSE_VIDEO");
  }
  emits.off("HANDEL_GIMBAL");
});
</script>
<style lang="scss" scoped>
.eagle-eye-perspective {
  width: 100%;
  height: 100%;
  position: relative;

  .eagle-video-container {
    width: 100%;
    height: 100%;
    display: block;
  }

  .open {
    position: absolute;
    right: clamp(0.625rem, 0.52vw, 1.25rem);
    bottom: clamp(2.188rem, 1.82vw, 4.375rem);
    width: auto;
    height: auto;
    z-index: 9;
  }

  .collapse {
    position: absolute;
    right: clamp(0.625rem, 0.52vw, 1.25rem);
    bottom: clamp(2.188rem, 1.82vw, 4.375rem);
    width: clamp(4.375rem, 3.65vw, 8.75rem);
    height: clamp(4.375rem, 3.65vw, 8.75rem);
    background-color: rgba(6, 30, 41, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 9;

    img {
      width: 64px;
      height: 64px;
      display: block;
      cursor: pointer;
    }
  }
}
</style>
